<template>
    <div>
        <h2> <i class="el-icon-arrow-left  imgicon" @click="back"></i>汽车保养</h2>
        <div class="top">
            <h3>服务评价</h3>
            <div class="massge">
                <div class="left">
                    <img src="../../../assets/img/home-img/home.png" alt="">
                </div>
                <div class="right">
                    <p class="f25">小王汽车修理店</p>
                    <ul class="StarsWrap">
                        <li v-for="(i, index) in list" :key="index" @click="clickStars(index)">
                            <van-icon name="star" :class="xing > index ? active2 : active" size="30rem"/>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="middle">
            <h3>评语 <span>(0-299字)</span></h3>
            <van-field v-model="message" rows="5" type="textarea" maxlength="299" placeholder="请留下您宝贵的意见和建议...." />
        </div>

        <div class="bom">
            <h3>照片（选填）</h3>
            <van-uploader v-model="fileList" multiple  preview-size="140rem"  :after-read="afterRead" ref="file">
                <div class="gray">
                    <van-icon name="plus" size="30rem" class="pt20 pb10 pr30 pl30"/>
                    <p class="f25 ">上传图片</p>
                </div>
            </van-uploader>
           
        </div>
        <div class="footer">
            <button @click="onSubmit">提交</button>
        </div>
    </div>
</template>
<script>
import { addComment } from "../../../api/home";
export default {
    data() {
        return {
            xing: 0,
            message: '',
            active:"active",
            active2:"active2",
            list: [0, 1, 2, 3, 4],
            fileList: []
        }
    },
    created() {
    },
    computed: {
    },
    methods: {
        afterRead(file){
            // const forms = new FormData();
            // forms.append("file", file.file);
            let img = file.content;
            this.fileList.push[img];
            console.log(this.fileList[0].content);
        },
        onSubmit(){//提交评论
            addComment({
                orderId:7,
                serviceId:5,
                star:this.xing,
                content:this.message,
                userId:1,
                imageFile:this.fileList[0].content.data
            }).then(r=>{
                
                console.log(r);
            })
        },
        back(){
            this.$router.back()
        },
        clickStars(i) {
            this.xing = i + 1
              console.log("点击了"+(i+1)+"颗星")
        },
    },


}
</script>
<style  scoped>
.active{
    color:gray;
}
.active2{
    color:#ffc207;
}
.gray{
    margin-top: 20rem;
    background-color: #fff;
    border: 1rem solid rgb(225, 225, 225);
    padding: 20rem;
    color: rgb(225, 225, 225) ;
}
h2 {
    text-align: center;
    font-size: 36rem;
    font-weight: normal;
    width: 100%;
    height: 430rem;
    background-color: rgb(46, 128, 249);
    padding-top: 70rem;
    color: white;

}
.imgicon{
position: absolute;
left: 30rem;
top: 80rem;
}
.massge {
    display: flex;
}

.middle {
    font-size: 30rem;
}

.left {
    padding: 30rem;
}

.left img {
    width: 190rem;
    height: 120rem;
}

.right {
    padding-top: 50rem;
}

h3 {
    font-size: 28rem;
}

.top {
    width: 710rem;
    height: 315rem;
    position: relative;
    top: -300rem;
    left: 18rem;
    box-sizing: border-box;
    font-size: 25rem;
    border-radius: 20rem;
    background-color: #fff;
    padding: 20rem 30rem;
}
.bom{
    width: 710rem;
    box-sizing: border-box;
    border-radius: 20rem;
    position: relative;
    top:-240rem;
    left: 18rem;
    padding: 30rem;
    background-color: #fff;
}
.middle {
    width: 710rem;
    box-sizing: border-box;
    border-radius: 20rem;
    position: relative;
    top: -260rem ;
    left: 18rem;
    padding: 30rem;
    background-color: #fff;
}

.StarsWrap {
    width: 100%;
    height: 20rem;
    line-height: 20rem;
    margin: 10rem 0;
}

.StarsWrap li {
    float: left;
    margin-right: 10rem;
}

.StarsWrap img {
    width: 30rem;
    height: 30rem;
}

>>>.van-field__control {
    padding: 20rem;
    font-size: 30rem;
    border: 1rem solid gray;
    border-radius: 20rem;
    margin-top: 20rem;
}
.footer{
    text-align: center;
    width: 100%;
    height: 145rem;
    line-height: 145rem;
    background-color: #fff;
    position: fixed;
    bottom: 0;
}
.footer button{
    width: 520rem;
    border-radius: 35rem;
    margin: 0 auto;
    line-height: 70rem;
    font-size: 32rem;
    height:70rem ;
    border: 0;
    background-color: rgb(6,98,230);
    color: white;
    text-align: center;

}
</style>
